<template>
    <div class="addWrap">
        <Header title="新增发票抬头"><button class="btn">保存</button></Header>
        <main>
            <div class="tit">
                <p>抬头类型：</p>
                <div v-for="(v,i) in routerlist" :key='i'>
                    <router-link :to='v.path'>{{v.mate.title}}</router-link>
                </div>
            </div>
            <router-view></router-view>
        </main>
    </div>
    
</template>
<script>
import Header from "../components/Header.vue"
import routerlist from "../router/pages"
export default {
    data(){
        return{
            routerlist:routerlist
        }
    },
    components:{
        Header
    }
}
</script>

<style lang="scss" scoped>
    .addWrap{
        width: 100%;
        height: 100%;
        .btn{
            font-size: 16px;
            background: none;
            border: none;
            color: dodgerblue;
        }
        main{
            width: 100%;
            height: 100%;
            background: #f3f3f3;
            .tit{
                width: 100%;
                height: 45px;
                display: flex;
                background: #fff;
                border-bottom: 1px solid #f5f5f5;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                a{
                    text-decoration: none;
                    color: #000;
                    border: 1px solid #ccc;
                    padding: 5px 10px;
                    font-size: 12px;
                    border-radius: 10px;
                    &.router-link-active{
                        color:dodgerblue;
                        border-color:dodgerblue
                    }
                }
            }
        }
    }
</style>